<template>
  <div class="page-home-container px-7">
    <!-- top -->
    <div class="head-block py-7 d-flex ai-center">
      <a v-if="curLocation" href="/pages/citySearch" class="city-block d-flex ai-center">
        <p class="fs-xl fwb">{{curLocation}}</p>
        <img src="/static/images/page/pull.png" class="pull-i">
      </a>
      <a href="/pages/searchResult" class="search-block flex-1 d-flex ai-center bg-light px-7">
        <img src="/static/images/page/search.png" class="search-i mr-3">
        <input disabled type="text" placeholder="搜索目的地/点评" class="w-100 flex-1 fs-lg">
      </a>
    </div>
    <!-- nav -->
    <div class="nav-block d-flex flex-wrap">
      <a v-if="i<9" v-for="(item,i) in navList" :key="item.name" href="/pages/typeDetail" class="nav-item mb-6">
        <img :src="'/static/images/page/'+ item.img" class="nav-i">
        <p class="fs-sm text-center">{{item.name}}</p>
      </a>
      <a href="/pages/moreNav" class="nav-item mb-6">
        <img src="/static/images/page/nav-more.png" class="nav-i">
        <p class="fs-sm text-center">更多</p>
      </a>
    </div>
    <!-- discover -->
    <div class="discover-block pt-4">
      <div class="title-block d-flex  mb-7">
        <span class="fs-xl fwb pr-4">发现</span>
        <p class="title-dress-line flex-1"></p>
      </div>
      <flow-data />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import FlowData from '@/components/FlowData'
import { nav } from '@/variables/siteNav'
export default {
  components: { FlowData },
  data() {
    return {
      navList: nav
    }
  },
  computed: {
    ...mapGetters([
      'gpsLocation',
      'location',
    ]),
    curLocation() {
      return this.location || this.gpsLocation
    }
  },
  created() {
    if (this.gpsLocation || this.location) return
    this.$native.Location(false).then(res => {
      this.$store.dispatch('user/getLocationCity', res)
    }, rej => {
      this.$store.state.user.location = '北京'
    })
  },
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.page-home-container {
  .pull-i {
    @include wh(23rpx, 12rpx);
    margin-left: 10rpx;
    margin-right: 20rpx;
  }
  .search-block {
    height: 60rpx;
    border-radius: 30rpx;
    .search-i {
      @include wh(25rpx, 25rpx);
    }
  }
  .nav-block {
    margin-left: -30rpx;
    margin-right: -30rpx;
    .nav-item {
      width: 20%;
      .nav-i {
        display: block;
        @include wh(100rpx, 100rpx);
        margin: 0 auto 12rpx;
      }
    }
  }
  .discover-block {
    .title-dress-line {
      border-bottom: 1rpx solid $green-border;
    }
  }
}
</style>